<template>
  <div class="wapper">
    <table></table>
    <div class="header">
      智慧营销业务运营推送
    </div>
    <div class="content">
      <div class="fault">
        <div class="small_title">故 障 等 级</div>
        <div class="fault_con">
          <div v-for="(item) in list" :key="item.id">
            <div v-if="item.id == currentId" class="isCheck" @click="handleFault(item.id, item.dictName)">
              {{item.dictName}}</div>
            <div v-else class="isNoCheck" @click="handleFault(item.id, item.dictName)">{{item.dictName}} </div>
          </div>
        </div>
      </div>
      <div class="changeSystem">
        <span class="name">选 择 系 统</span>
        <el-select v-model="sysValue" placeholder="请选择" @change="handleChangeSys()">
          <el-option v-for="item in sysList" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">
          </el-option>
        </el-select>
      </div>
      <div class="chanegePerson">
        <div class="small_title">推 送 人 员</div>
        <div class="personCon">
          <span v-for="(item) in personlist" :key="item.id">
            {{item.staffName}}
          </span>
        </div>
      </div>
      <div class="pushMode">
        <span class="name">推 送 方 式</span>
        <span class="bg_mode bg_mode1">
          <el-checkbox v-model="Ichecked">IWORK推送</el-checkbox>
          <!-- <el-radio v-model="Ichecked" label="1">IWORK推送</el-radio> -->
        </span>
        <span class="bg_mode">
          <el-checkbox v-model="Pchecked">短信推送</el-checkbox>
          <!-- <el-radio v-model="Ichecked" label="3">短信推送</el-radio> -->
        </span>
      </div>
      <div class="pushContent">
        <div class="small_title">推 送 内 容</div>
        <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="textarea">
        </el-input>
      </div>
      <div class="submit-button">
        <div class="button" @click="handlePush()">立 即 推 送</div>
        <div class="button" @click="handleReset()">点 击 重 置</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        currentId: 1,
        sysValue: '',
        options: [],
        textarea: '',
        Ichecked: true,
        Pchecked: false,
        sysList: [],
        personlist: [],
        init: true, // 初始加载赋值
        labelName: ''
      }
    },
    activated() {
      this.getSysList()
    },
    methods: {
      handleChangeSys() {
        this.init = false
        this.getSysList()
        this.textarea = ''
        this.Ichecked = 0
      },
      // 点击立即推送
      handlePush() {
        // 去人员id
        // let groupId = []
        // this.personlist.map(item => {
        //   groupId.push(item.staffId)
        // })
        // 选择推送
        let pushType = null
        if (this.Ichecked) {
          pushType = 1
        }
        if (this.Pchecked) {
          pushType = 3
        }
        if (this.Ichecked && this.Pchecked) {
          pushType = 2
        }
        this.$confirm(`您确定立即推送吗`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl("/cpcpdu/save"),
              method: "post",
              data: this.$http.adornData({
                serviceType: 'zhyx_service',
                content: this.textarea,
                sendGroup: 0, //推送模式  0个人 1群组
                labelIds: this.currentId,
                labelName: this.labelName,
                pushType: pushType, // 1应用内消息。2短信+应用内消息 3:短信
                pattern: 1, // 0 图片， 1 文本
                activityId: 'zhyx_ywyy',
                activityName: '智慧营销业务运营推送',
                isTiming: 1, // 是否定时
                sendType: 0,
                userType:1,
                // sendUpType:0
              }),
            }).then(({
              data
            }) => {
              if (data && data.code === 0) {
                this.handleNowpush(data.duId);
              }
            });
          })
      },
      // 弹框直接推送
      handleNowpush(id) {
        let ids = [id];
        this.$http({
          url: this.$http.adornUrl("/cpcpdu/sendOneMessage"),
          method: "post",
          data: this.$http.adornData(ids, false),
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "推送成功",
              type: "success",
              duration: 3000,
            });
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      // 获取系统列表
      getSysList() {
        this.$http({
          url: this.$http.adornUrl('/sysdictdata/systemTypeList'),
          method: 'get',
          params: this.$http.adornParams({
            dictType: 'wit_system_type'
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.sysList = data.data
            if (this.init) {
              this.sysValue = this.sysList[0].dictValue
            }
            this.getGroupLevel()
          }
        })
      },
      // 获取故障等级
      getGroupLevel() {
        this.$http({
          url: this.$http.adornUrl('/sysdictdata/getDangerLevelListBySystemType'),
          method: 'get',
          params: this.$http.adornParams({
            dictType: this.sysValue
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.list = data.page.list
            this.currentId = this.list[0].id
            this.labelName = this.list[0].dictName
            this.getPersonList()
          }
        })
      },
      // 获取人员
      getPersonList() {
        this.$http({
          url: this.$http.adornUrl('/staffsysdictdata/list'),
          method: 'get',
          params: this.$http.adornParams({
            sysDictDataId: this.currentId
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.personlist = data.list ? data.list : []
          }
        })
      },
      handleFault(id, name) {
        this.currentId = id
        this.labelName = name
        this.getPersonList()
      },
      // 点击重置
      handleReset() {
        this.textarea = ''
        this.Ichecked = true
        this.Pchecked = false
        this.init = true
        this.getSysList()
      },
    }
  }
</script>

<style scoped>
  .el-textarea /deep/ .el-textarea__inne {
    background-color: transparent !important;
    border: 1px solid transparent !important;
  }

  .wapper {
    width: 100%;
    /* height: calc(100vh - 120px); */
    background: url('../../../assets/img/bg.png') no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
  }

  .header {
    width: 100%;
    height: 80px;
    background: url('../../../assets/img/title.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    text-align: center;
    line-height: 60px;
    font-size: 40px;
    color: #73D2EC;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .content {
    width: 70%;
    margin: 0 auto;
  }

  .fault {
    width: 100%;
    height: 120px;
    background: url('../../../assets/img/故障等级.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding: 20px;
    color: #ffffff;
  }

  .chanegePerson {
    width: 100%;
    height: 180px;
    background: url('../../../assets/img/推送人员.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding: 20px;
  }

  .pushContent {
    width: 100%;
    height: 180px;
    background: url('../../../assets/img/推送内容.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding: 20px;
  }

  .small_title {
    font-size: 24px;
    color: #73D2EC;
    font-weight: bold;
    position: absolute;
    top: -12px;
    left: 10px;
  }

  .name {
    font-size: 24px;
    color: #73D2EC;
    font-weight: bold;
    margin: 0 40px 0 10px;
  }

  .submit-button {
    display: flex;
    margin: 40px 0;
  }

  .button {
    width: 160px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: #73D2EC;
    font-weight: bold;
    background: url('../../../assets/img/按钮.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
  }

  .button:first-child {
    margin-right: 60px;
  }

  .changeSystem,
  .pushMode {
    margin: 40px 0;
  }

  .el-input /deep/ .el-input__inner {
    background: transparent !important;
  }

  .bg_mode {
    display: inline-block;
    width: 180px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: #73D2EC;
    font-weight: bold;
    background: url('../../../assets/img/短信.png') no-repeat;
    background-size: 100% 100%;
  }

  .bg_mode1 {
    margin-right: 60px;
  }

  .fault_con {
    display: flex;
    flex-wrap: wrap;
    height: 88px;
    overflow-y: auto;
  }

  .isCheck {
    background: url('../../../assets/img/g_bg2.png') no-repeat;
  }

  .isNoCheck {
    background: url('../../../assets/img/g_bg1.png') no-repeat;
  }

  .isCheck,
  .isNoCheck {
    width: 140px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-size: 100% 100%;
    margin-right: 10px;
    cursor: pointer;
  }

  .personCon {
    height: 148px;
    overflow-y: auto;
    padding: 4px;
  }

  .personCon span {
    display: inline-block;
    width: 78px;
    padding: 5px 20px;
    border: 1px solid #73D2EC;
    border-radius: 8px;
    color: #ffffff;
    font-size: 12px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
  }

  .el-checkbox {
    color: #ffffff;
  }
</style>
